<template>
  <div class="refine_intendance">
    <h2 class="titleblue">作业计划申请查询</h2>
    <div class="contant">
      <el-row :gutter="20">
        <el-col :sm="8" :md="8" :lg="8" class="search-item">
          <label class="search-label">中文船名: </label>
          <el-input class="search-content" v-model="chooption.shipName" placeholder="请输入中文船名"></el-input>
        </el-col>
        <el-col :sm="8" :md="8" :lg="8" class="search-item">
          <label class="search-label">英文船名: </label>
          <el-input class="search-content" v-model="chooption.shipNameEn" placeholder="请输入英文船名"></el-input>
        </el-col>
        <el-col :sm="8" :md="8" :lg="8" class="search-item">
          <label class="search-label">船舶登记号: </label>
          <el-input class="search-content" v-model="chooption.shipNo" placeholder="请输入船舶登记号"></el-input>
        </el-col>


        <el-col :sm="8" :md="8" :lg="8" class="search-item">
          <label class="search-label">IMO编号: </label>
          <el-input class="search-content" v-model="chooption.imo" placeholder="请输入IMO编号"></el-input>
        </el-col>

        <el-col :sm="8" :md="8" :lg="8" class="search-item">
          <label class="search-label">报送单位: </label>
          <el-select class="search-content" clearable v-model="chooption.applyUnit" placeholder="请选择报送单位">
            <el-option v-for="(item, index) in planData.reportedUnit" :key="index" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-col>
        <el-col :sm="8" :md="8" :lg="8" class="search-item">
          <label class="search-label">申报状态: </label>
          <el-select class="search-content" clearable v-model="chooption.applyStatus" placeholder="请选择报申报状态">
            <el-option label="待审" :value="1"></el-option>
            <el-option label="审核通过" :value="2"></el-option>
            <el-option label="审核不通过" :value="3"></el-option>
            <el-option label="未提交" :value="4"></el-option>
            <el-option label="撤销" :value="5"></el-option>
          </el-select>
        </el-col>
      </el-row>
        <div style="display:flex;flex-direction:row;justify-content:center;">
          <el-button type="primary" @click="newShip()">单船录入</el-button>
          <el-upload style="margin-left:20px;" class="upload-demo" ref="excelUpload" :action="$config.FILE_UPLOAD_URL" :data='uploadModel'
                     accept='.xlsx,.xls' :on-preview="handlePreview" :file-list="fileList"
                     :on-remove="handleRemove" :limit="1" :before-upload="beforeAvatarUpload"
                     :on-exceed="handleExceed" :on-success='uploadSuccess' :headers="headers"
                     :show-file-list="false" multiple :on-error="uploadError">
            <el-button type="primary">批量上传</el-button>
          </el-upload>
          <el-button style="margin-left:20px;" type="primary" @click="search(0)">历史计划查询</el-button>
        </div>


      <el-row :gutter="20" style="margin: 0 0 10px 0;display:flex;flex-direction:row;align-items: center;">

        <a style="margin-left:20px;" href="/static/船舶计划申报端用户手册.docx">用户手册</a>
        <a style="margin-left:20px;" href="/static/template.xls">模板下载</a>
        <span style="font-size:12px;color:#999;">&emsp;请下载后，按手册填写，然后上传</span>
      </el-row>

      <el-row :gutter="20" style="margin: 0;">
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column prop="applyStatus" label="申报状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.applyStatus == 1">待审</span>
              <span v-if="scope.row.applyStatus == 2">审核通过</span>
              <span v-if="scope.row.applyStatus == 3">审核不通过</span>
              <span v-if="scope.row.applyStatus == 4">未提交</span>
              <span v-if="scope.row.applyStatus == 5">撤销</span>
            </template>
          </el-table-column>
          <el-table-column :key="col.prop" align="center" v-for="col in relArray" :prop="col.prop" :label="col.label">
            <template slot-scope="scope">
              <span>{{getColLabel(scope.row, col.prop)}}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="operate" label="操作" width="120" fixed="right">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.applyStatus == 2 || scope.row.applyStatus == 3"
                size="mini"
                type="text"
                @click.native.prevent="manipulate({action: 'view', data: scope.row})">
                查看
              </el-button>
              <el-button
                v-if="scope.row.applyStatus != 2 && scope.row.applyStatus != 3"
                size="mini"
                type="text"
                @click.native.prevent="manipulate({action: 'change', data: scope.row})">
                修改
              </el-button>
              <el-button
                v-if="scope.row.applyStatus == 1 && scope.row.applyStatus != 2 && scope.row.applyStatus != 3"
                size="mini"
                type="text"
                @click.native.prevent="manipulate({action: 'del', data: scope.row})">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page.sync="currentPage"
                       layout="total,prev, pager, next, jumper" :total="totalNum" background>
        </el-pagination>
      </div>
    </div>

    <!-- 计划详情 -->
    <el-dialog :visible.sync="detailDialog" :before-close="close" width="80%" class="plan-dialog">
      <plan-detail ref="planDetail" @update="search" @close="close" :type="dialogType"></plan-detail>
    </el-dialog>
  </div>
</template>

<script>
  import DataTable from "@/components/common/DataTable.vue"
  import workPLanService from '@/services/WorkPLanService'
  import planData from '../component/PlanData.js'
  import PlanDetail from "@/components/Plan/component/PlanDetail.vue"

  export default {
    name: 'PlanSearch',
    components: {
      'data-table': DataTable,
      'plan-detail': PlanDetail
    },
    data: function () {
      return {
        chooption: {
          imo: '',
          shipName: '',
          shipNameEn: '',
          shipNo: '',
          applyStatus: '',
        },
        totalNum: 1,
        currentPage: 0,
        tableData: [],
        headers: {
          token: localStorage.getItem('token')
        },
        fileList: [],
        uploadModel: {
          filename: '',
          mimeType: "text/xlsx",
          // bus: 'user'
          // appid: "135",
          // businessobj: "txt"
        },
        detailDialog: false,
        rowData: {},
        dialogType: '',
        planData: planData,
        relArray: [
          {prop: 'shipName', label: '船舶名称'},
          {prop: 'shipNameEn', label: '英文船名'},
          {prop: 'country', label: '国籍'},
          {prop: 'shipNo', label: '船舶登记号'},
          {prop: 'imo', label: 'imo编号'},
          {prop: 'capacity', label: '载重吨'},
          {prop: 'portName', label: '港区名称'},
          {prop: 'agency', label: '代理公司'},
          {prop: 'shipLength', label: '船长(米)'},
          {prop: 'loadBefore', label: '前吃水'},
          {prop: 'loadAfter', label: '后吃水'},
          {prop: 'loadType', label: '装/卸货'},
          {prop: 'goodsName1', label: '货物名称'},
          {prop: 'goodsCount', label: '货物数量'},
          {prop: 'dangerGoods', label: '危险品'},
          {prop: 'lastPort', label: '上一港'},
          {prop: 'arriveBerth', label: '靠泊泊位'},
          {prop: 'berthPlanTime', label: '计划靠泊时间'},
          {prop: 'moveBerth', label: '移泊泊位'},
          {prop: 'moveEst', label: '计划移泊时间'},
          {prop: 'leaveBerth', label: '离泊泊位'},
          {prop: 'leaveEst', label: '计划离泊时间'},
          {prop: 'inOutType', label: '进出港标志'},
          {prop: 'approvalUnit', label: '报给单位'},
          {prop: 'remark', label: '备注'},
          {prop: 'createTime', label: '申报时间'}
        ],
        applyUser: JSON.parse(localStorage.getItem('userInfo'))
      }
    },
    mounted() {
      this.search(0)
    },
    methods: {
      getColLabel(rowData, prop) {
        let val = rowData[prop]
        if (prop.indexOf('Berth') > -1) {
          return this.searchArea(val)
        // } else if (prop === 'country') {
        //   let c = planData.countries.find(p => p.value === val)
        //   return !!c ? c.label : val
        } else if (prop === 'dangerGoods') {
          if (val === 0) {
            return '是';
          } else if (val === 1) {
            return '否';
          } else {
            return '';
          }
        } else if (prop === 'loadType') {
          if (val === 0) {
            return '装'
          } else if (val === 1) {
            return '卸'
          } else {
            return ''
          }
        } else if (prop === 'berthPlanTime' || prop === 'moveEst' || prop === 'createTime' || prop === 'leaveEst') {
          if (val) {
            return this.$m(val).format('YYYY-MM-DD HH:mm:ss')
          } else {
            return ''
          }
        } else if (prop === 'inOutType') {
          if (val === 1) {
            return '进港'
          } else if (val === 2) {
            return '出港'
          } else {
            return ''
          }
        } else if (prop === 'approvalUnit') {
          let c = planData.reportedUnit.find(p => p.value === val)
          return !!c ? c.label : ''
        }
        return val
      },
      handleRemove(file, fileList) {
      },
      handlePreview(file) {
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      uploadError(err, file, fileList) {
        // this.$message.error(err.title);
        // console.log('error', err);
        let msgObj = JSON.parse(err.message);
        this.$message.error(msgObj.title);
      },
      handleAvatarSuccess(res) {
        // this.form.avatar = res.data.link
        this.uploadModel.file = res.data.link
      },
      beforeAvatarUpload(file) {
        this.uploadModel.filename = file.name
        return true;
      },
      newShip() {
        this.detailDialog = true
        // this.rowData = param.data
        this.dialogType = 'create'
        this.$nextTick(res => {
          this.$refs.planDetail.showDeatil({})
        })
      },
      uploadSuccess(res) {
        this.$refs.excelUpload.clearFiles()
        this.$message({
          message: '上传成功！',
          type: 'success'
        })
        this.search(0)
        // this.uploadModel.file = res.data.link
      },
      searchArea(data) {
        let obj = {}, berthData = planData.berth
        if (data) {
          obj = berthData.find(item => {
            return item.value == data
          })
        } else {
          obj = {
            label: ''
          }
        }
        return obj ? obj.label : ''
      },
      clearSearch() {
        this.chooption = {
          imo: '',
          shipName: '',
          shipNameEn: '',
          applyStatus: '',
          shipNo: ''
        }
        this.search(0)
      },
      // 表格option操作函数
      manipulate(param) {
        if (param.action == 'change') {
          this.detailDialog = true
          // this.rowData = param.data
          this.$set(this, 'rowData', param.data)
          this.dialogType = 'edit'
          this.$nextTick(res => {
            this.$refs.planDetail.showDeatil(param.data)
          })
        } else if (param.action == 'view') {
          this.detailDialog = true
          // this.rowData = param.data
          this.$set(this, 'rowData', param.data)
          this.dialogType = 'view'
          this.$nextTick(res => {
            this.$refs.planDetail.showDeatil(param.data)
          })
        } else if (param.action === 'del') {
          this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            workPLanService.delete(param.data.id).then(e => {
              this.$message.success('删除成功！');
              this.search(this.currentPage - 1);
            })
          })
        }

      },
      // 弹层关闭函数
      close() {
        this.detailDialog = false
      },
      handleSizeChange(page) {
        this.search(page - 1)
      },
      handleCurrentChange(page) {
        this.search(page - 1)
      },
      // 查询参数拼接函数
      handlerQuery() {
        let str = 'applyUser.id==' + this.applyUser.id + '&'
        if (this.chooption.imo) {
          str += 'imo=like=' + this.chooption.imo
        }
        if (this.chooption.shipNo) {
          str += 'shipNo=like=' + this.chooption.shipNo
        }
        if (this.chooption.shipName) {
          if (str) {
            str += '&'
          }
          str += 'shipName=like=' + this.chooption.shipName
        }
        if (this.chooption.applyUnit) {
          if (str) {
            str += '&'
          }
          str += 'approvalUnit==' + this.chooption.applyUnit
        }
        if (this.chooption.shipNameEn) {
          if (str) {
            str += '&'
          }
          str += 'shipNameEn=like=' + this.chooption.shipNameEn
        }
        if (this.chooption.shipNo) {
          if (str) {
            str += '&'
          }
          str += 'shipNo=like=' + this.chooption.shipNo
        }

        if (this.chooption.applyStatus) {
          if (str) {
            str += '&'
          }
          str += 'applyStatus==' + this.chooption.applyStatus
        }
        return str + "&sort=createTime,desc"
      },
      // 查询函数
      search(num = 0) {
        if (num == 0) {
          this.$set(this, 'currentPage', 1)
        }
        let str = this.handlerQuery()
        // let str = ''
        workPLanService.searchList(str, num, 10).then(res => {
          this.tableData = res.data
          this.totalNum = parseInt(res.headers['x-total-count'], 10)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .refine_intendance {
    width: 100%;
  }

  .search-item {
    padding: 10px 0;
  }

  .search-label {
    display: inline-block;
    width: 120px;
    text-align: right;
  }

  .search-content {
    max-width: calc(100% - 150px);
    margin-left: 20px;
    width: 100%;
  }

  .search-btn {
    text-align: center;
  }
</style>
